<template>
  <div class="chat-container">
    <!-- 侧边栏 -->
    <div :class="['sidebar', { collapsed: isSidebarCollapsed }]">
      <div class="sidebar-header">
        <h2 v-if="!isSidebarCollapsed">edu-Agent</h2>
        <a-button
          type="text"
          @click="toggleSidebar"
          class="toggle-btn"
          :icon="isSidebarCollapsed ? 'menu-unfold' : 'menu-fold'"
        />
      </div>
      
      <div class="sidebar-content">
        <a-button
          type="primary"
          block
          @click="createNewSession"
          class="new-session-btn"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          <span v-if="!isSidebarCollapsed">新建会话 (Ctrl+K)</span>
        </a-button>
        
        <div class="mode-selector">
          <a-menu
            v-model:selectedKeys="selectedMode"
            mode="vertical"
            @click="handleModeChange"
          >
            <a-menu-item key="chat">
              <template #icon>
                <MessageOutlined />
              </template>
              <span v-if="!isSidebarCollapsed">RAG对话</span>
            </a-menu-item>
            <a-menu-item key="document">
              <template #icon>
                <FileTextOutlined />
              </template>
              <span v-if="!isSidebarCollapsed">文档总结</span>
            </a-menu-item>
          </a-menu>
        </div>
        
        <div class="history-section" v-if="!isSidebarCollapsed">
          <h3>历史会话</h3>
          <div
            v-for="session in recentSessions"
            :key="session.id"
            class="session-item"
            :class="{ active: currentSession?.id === session.id }"
            @click="selectSession(session)"
          >
            <div class="session-info">
              <span class="session-title">{{ session.title }}</span>
              <span class="session-time">{{ formatTime(session.createTime) }}</span>
            </div>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                <EllipsisOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="editSessionTitle(session)">
                    <EditOutlined /> 编辑标题
                  </a-menu-item>
                  <a-menu-item @click="pinSession(session)">
                    <PushpinOutlined /> 置顶
                  </a-menu-item>
                  <a-menu-item @click="deleteSession(session)">
                    <DeleteOutlined /> 删除
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <a-button type="link" @click="viewAllSessions" block class="view-all-btn">
            查看全部
          </a-button>
        </div>
      </div>
      
      <div class="sidebar-footer" v-if="!isSidebarCollapsed">
        <a-button @click="toggleFullscreen" block>
          <template #icon>
            <FullscreenExitOutlined v-if="isFullscreen" />
            <FullscreenOutlined v-else />
          </template>
          {{ isFullscreen ? '退出全屏' : '全屏模式' }}
        </a-button>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 初始状态 -->
      <div v-if="!currentSession && chatMode === 'chat'" class="initial-state">
        <div class="welcome-section">
          <h1>edu-Agent</h1>
          <div class="input-container">
            <a-textarea
              v-model:value="userInput"
              placeholder="请输入您的问题..."
              :auto-size="{ minRows: 3, maxRows: 6 }"
              @pressEnter="handleSend"
            />
            <div class="input-actions">
              <a-button type="text" class="action-btn" @click="toggleDeepThinking">
                <BulbOutlined /> 深度思考
              </a-button>
              <a-button type="text" class="action-btn" @click="toggleWebSearch">
                <GlobalOutlined /> 联网搜索
              </a-button>
              <a-button type="text" class="action-btn" @click="enhancePrompt">
                <HighlightOutlined /> 提示词增强
              </a-button>
              <a-button type="text" class="action-btn">
                <PaperClipOutlined /> 附件
              </a-button>
              <a-button
                type="primary"
                @click="handleSend"
                :disabled="!userInput.trim()"
                class="send-btn"
              >
                发送
              </a-button>
            </div>
          </div>
          <div class="quick-questions">
            <div class="question-row">
              <a-button type="default" @click="selectQuickQuestion('什么是人工智能？')">
                什么是人工智能？
              </a-button>
              <a-button type="default" @click="selectQuickQuestion('机器学习和深度学习有什么区别？')">
                机器学习和深度学习有什么区别？
              </a-button>
            </div>
            <div class="question-row">
              <a-button type="default" @click="selectQuickQuestion('如何提高编程能力？')">
                如何提高编程能力？
              </a-button>
              <a-button type="default" @click="selectQuickQuestion('推荐一些学习Python的资源')">
                推荐一些学习Python的资源
              </a-button>
              <a-button type="default" @click="selectQuickQuestion('解释一下区块链技术')">
                解释一下区块链技术
              </a-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 对话状态 -->
      <div v-else-if="chatMode === 'chat'" class="chat-state">
        <div class="chat-header">
          <a-button @click="showModelSelector = true">
            <template #icon>
              <RobotOutlined />
            </template>
            {{ selectedModel?.modelName || '选择模型' }}
          </a-button>
          <a-button v-if="chatType === 'default'" @click="showPromptSelector = true" style="margin-left: 10px;">
            <template #icon>
              <FileSearchOutlined />
            </template>
            选择提示词
          </a-button>
        </div>
        
        <div class="messages-container" ref="messagesContainer">
          <div
            v-for="message in messages"
            :key="message.id"
            :class="['message', message.role]"
          >
            <div class="message-avatar">
              <UserOutlined v-if="message.role === 'user'" />
              <RobotOutlined v-else />
            </div>
            <div class="message-content">
              <div class="message-text" v-html="renderMarkdown(message.content)"></div>
              <div class="message-actions">
                <a-button type="text" size="small" @click="copyMessage(message)">
                  <CopyOutlined /> 复制
                </a-button>
                <a-button
                  v-if="message.role === 'assistant'"
                  type="text"
                  size="small"
                  @click="retryMessage(message)"
                >
                  <RedoOutlined /> 重试
                </a-button>
              </div>
            </div>
          </div>
          <!-- 深度思考内容 -->
          <div v-if="deepThinkingContent" class="deep-thinking-section">
            <a-collapse>
              <a-collapse-panel key="1" header="深度思考过程">
                <div v-html="renderMarkdown(deepThinkingContent)"></div>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
        
        <div class="input-container">
          <a-textarea
            v-model:value="userInput"
            placeholder="请输入您的问题..."
            :auto-size="{ minRows: 3, maxRows: 6 }"
            @pressEnter="handleSend"
          />
          <div class="input-actions">
            <a-button 
              type="text" 
              class="action-btn" 
              @click="toggleDeepThinking"
              :class="{ active: isDeepThinking }"
            >
              <BulbOutlined /> 深度思考
            </a-button>
            <a-button 
              type="text" 
              class="action-btn" 
              @click="toggleWebSearch"
              :class="{ active: isWebSearch }"
            >
              <GlobalOutlined /> 联网搜索
            </a-button>
            <a-button 
              type="text" 
              class="action-btn" 
              @click="enhancePrompt"
            >
              <HighlightOutlined /> 提示词增强
            </a-button>
            <a-button type="text" class="action-btn">
              <PaperClipOutlined /> 附件
            </a-button>
            <a-button
              type="primary"
              @click="handleSend"
              :loading="isSending"
              :disabled="!userInput.trim() && !isSending"
              class="send-btn"
            >
              {{ isSending ? '中断' : '发送' }}
            </a-button>
          </div>
        </div>
      </div>
      
      <!-- 文档总结状态 -->
      <div v-else-if="chatMode === 'document'" class="document-state">
        <div class="document-container">
          <h2>文档总结</h2>
          <p>上传文件或输入文件链接进行文档总结</p>
          
          <div class="upload-section">
            <a-upload-dragger
              name="file"
              :multiple="true"
              :max-count="50"
              :before-upload="beforeUpload"
            >
              <p class="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
              <p class="ant-upload-hint">
                支持单次上传最多50个文件，每个文件不超过100MB
              </p>
            </a-upload-dragger>
            
            <div class="link-input">
              <a-input
                v-model:value="documentLink"
                placeholder="或输入文件链接"
                addon-before="链接"
              />
              <a-button
                type="primary"
                @click="processDocumentLink"
                :disabled="!documentLink"
                style="margin-top: 10px;"
              >
                处理链接
              </a-button>
            </div>
          </div>
          
          <!-- 文档总结结果模态框 -->
          <a-modal
            v-model:open="showDocumentSummary"
            title="文档总结结果"
            width="800px"
            :footer="null"
          >
            <div class="summary-content" v-html="renderMarkdown(documentSummary)"></div>
          </a-modal>
        </div>
      </div>
      
      <!-- 历史会话状态 -->
      <div v-else-if="chatMode === 'history'" class="history-state">
        <div class="history-header">
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="搜索历史会话"
            style="width: 300px; margin-bottom: 20px;"
            @search="searchSessions"
          />
        </div>
        
        <div class="history-list">
          <div
            v-for="session in allSessions"
            :key="session.id"
            class="history-item"
            @click="selectSession(session)"
          >
            <div class="history-info">
              <h3>{{ session.title }}</h3>
              <p>{{ session.preview }}</p>
              <span class="history-time">{{ formatTime(session.createTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧抽屉 - 联网搜索内容 -->
    <a-drawer
      title="联网搜索结果"
      placement="right"
      :visible="showSearchDrawer"
      @close="showSearchDrawer = false"
      width="400"
    >
      <div class="search-results">
        <div
          v-for="(result, index) in searchResults"
          :key="index"
          class="search-result-item"
        >
          <h4>{{ result.title }}</h4>
          <p>{{ result.content }}</p>
          <a :href="result.url" target="_blank">{{ result.url }}</a>
        </div>
      </div>
    </a-drawer>
    
    <!-- 模型选择模态框 -->
    <a-modal
      v-model:open="showModelSelector"
      title="选择模型"
      @ok="confirmModelSelection"
      @cancel="showModelSelector = false"
    >
      <a-list :data-source="availableModels">
        <template #renderItem="{ item }">
          <a-list-item
            :class="{ selected: selectedModel?.modelName === item.modelName }"
            @click="selectModel(item)"
          >
            <a-list-item-meta :title="item.modelName" :description="item.description" />
          </a-list-item>
        </template>
      </a-list>
    </a-modal>
    
    <!-- 提示词选择模态框 -->
    <a-modal
      v-model:open="showPromptSelector"
      title="选择提示词"
      @ok="confirmPromptSelection"
      @cancel="showPromptSelector = false"
    >
      <a-list :data-source="availablePrompts">
        <template #renderItem="{ item }">
          <a-list-item
            :class="{ selected: selectedPrompt?.id === item.id }"
            @click="selectPrompt(item)"
          >
            <a-list-item-meta :title="item.subject" :description="item.content" />
          </a-list-item>
        </template>
      </a-list>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import {
  PlusOutlined,
  MessageOutlined,
  FileTextOutlined,
  EllipsisOutlined,
  EditOutlined,
  PushpinOutlined,
  DeleteOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  BulbOutlined,
  GlobalOutlined,
  HighlightOutlined,
  PaperClipOutlined,
  RobotOutlined,
  FileSearchOutlined,
  UserOutlined,
  CopyOutlined,
  RedoOutlined,
  InboxOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import MarkdownIt from 'markdown-it'

// 类型定义
interface ChatSession {
  id: number
  title: string
  createTime: string
  preview?: string
}

interface Message {
  id: number
  role: 'user' | 'assistant'
  content: string
  createTime?: string
}

interface ModelView {
  modelName?: string
  description?: string
}

interface PromptSelf {
  id?: number
  subject?: string
  content?: string
}

// 响应式数据
const isSidebarCollapsed = ref(false)
const isFullscreen = ref(true)
const chatMode = ref<'chat' | 'document' | 'history'>('chat')
const chatType = ref<'default' | 'rag'>('default')
const selectedMode = ref<string[]>(['chat'])
const currentSession = ref<ChatSession | null>(null)
const userInput = ref('')
const documentLink = ref('')
const isSending = ref(false)
const messages = ref<Message[]>([])
const recentSessions = ref<ChatSession[]>([])
const allSessions = ref<ChatSession[]>([])
const searchKeyword = ref('')
const showSearchDrawer = ref(false)
const searchResults = ref<any[]>([])

// 功能开关
const isDeepThinking = ref(false)
const isWebSearch = ref(false)

// 深度思考内容
const deepThinkingContent = ref('')

// 文档总结相关
const showDocumentSummary = ref(false)
const documentSummary = ref('')

// 模型和提示词相关
const showModelSelector = ref(false)
const showPromptSelector = ref(false)
const availableModels = ref<ModelView[]>([])
const availablePrompts = ref<PromptSelf[]>([])
const selectedModel = ref<ModelView | null>(null)
const selectedPrompt = ref<PromptSelf | null>(null)

// Markdown渲染器
const md = new MarkdownIt()

// EventSource引用
let eventSource: EventSource | null = null

// 计算属性
const messagesContainer = ref<HTMLElement | null>(null)

// 方法实现
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
}

const toggleDeepThinking = () => {
  isDeepThinking.value = !isDeepThinking.value
}

const toggleWebSearch = () => {
  isWebSearch.value = !isWebSearch.value
}

const enhancePrompt = () => {
  // 提示词增强逻辑
  message.info('提示词增强功能已启用')
}

const createNewSession = () => {
  // 创建新会话逻辑
  currentSession.value = {
    id: Date.now(),
    title: userInput.value || '新会话',
    createTime: new Date().toISOString()
  }
  messages.value = []
  chatMode.value = 'chat'
}

const handleModeChange = ({ key }: { key: string }) => {
  if (key === 'chat') {
    chatMode.value = 'chat'
    chatType.value = 'default'
  } else if (key === 'document') {
    chatMode.value = 'document'
  }
}

const selectSession = (session: ChatSession) => {
  currentSession.value = session
  chatMode.value = 'chat'
  // 加载会话消息
  loadSessionMessages(session.id)
}

const editSessionTitle = (session: ChatSession) => {
  // 编辑会话标题逻辑
  const newTitle = prompt('请输入新标题:', session.title)
  if (newTitle) {
    session.title = newTitle
    if (currentSession.value?.id === session.id) {
      currentSession.value.title = newTitle
    }
  }
}

const pinSession = (session: ChatSession) => {
  // 置顶会话逻辑
  message.success('会话已置顶')
}

const deleteSession = (session: ChatSession) => {
  // 删除会话逻辑
  recentSessions.value = recentSessions.value.filter(s => s.id !== session.id)
  if (currentSession.value?.id === session.id) {
    currentSession.value = null
    messages.value = []
  }
  message.success('会话已删除')
}

const viewAllSessions = () => {
  chatMode.value = 'history'
  loadAllSessions()
}

const selectQuickQuestion = (question: string) => {
  userInput.value = question
  handleSend()
}

const handleSend = () => {
  if (!userInput.value.trim() || isSending.value) return

  // 如果正在发送，点击按钮则中断
  if (isSending.value) {
    interruptSending()
    return
  }

  // 创建新会话（如果还没有）
  if (!currentSession.value) {
    createNewSession()
  }

  // 添加用户消息
  const userMessage: Message = {
    id: Date.now(),
    role: 'user',
    content: userInput.value
  }
  messages.value.push(userMessage)

  // 清空输入框
  userInput.value = ''

  // 滚动到底部
  scrollToBottom()

  // 发送消息并接收回复
  sendUserMessage(userMessage)
}

const sendUserMessage = (userMessage: Message) => {
  isSending.value = true
  deepThinkingContent.value = ''
  
  // 模拟API调用
  setTimeout(() => {
    // 添加AI回复
    const aiMessage: Message = {
      id: Date.now() + 1,
      role: 'assistant',
      content: `这是对"${userMessage.content}"的回复。这是一个示例回复，实际应用中会调用后端API获取真实回复。`
    }
    messages.value.push(aiMessage)
    
    // 滚动到底部
    scrollToBottom()
    isSending.value = false
  }, 1000)
}

const interruptSending = () => {
  isSending.value = false
  message.info('已中断发送')
}

const copyMessage = (msg: Message) => {
  // 复制消息逻辑
  navigator.clipboard.writeText(msg.content)
  message.success('消息已复制到剪贴板')
}

const retryMessage = (msg: Message) => {
  // 重试消息逻辑
  userInput.value = msg.content
  handleSend()
}

const processDocumentLink = () => {
  // 处理文档链接逻辑
  message.success('开始处理文档链接')
  // 模拟文档处理结果
  setTimeout(() => {
    documentSummary.value = `
# 文档总结示例

## 主要内容
这是从文档链接中提取的主要内容摘要。

## 关键点
1. 第一个关键点
2. 第二个关键点
3. 第三个关键点

## 结论
文档的核心结论和建议。
    `
    showDocumentSummary.value = true
  }, 2000)
}

const beforeUpload = (file: File) => {
  // 文件上传前检查
  const isLt100M = file.size / 1024 / 1024 < 100
  if (!isLt100M) {
    message.error('文件大小不能超过100MB!')
    return false
  }
  message.success(`${file.name} 上传成功`)
  
  // 模拟文档处理结果
  setTimeout(() => {
    documentSummary.value = `
# 文档总结示例

## 主要内容
这是从上传文件中提取的主要内容摘要。

## 关键点
1. 第一个关键点
2. 第二个关键点
3. 第三个关键点

## 结论
文档的核心结论和建议。
    `
    showDocumentSummary.value = true
  }, 2000)
  
  return false // 阻止自动上传
}

const loadSessionMessages = (sessionId: number) => {
  // 加载会话消息逻辑
  messages.value = [
    {
      id: 1,
      role: 'user',
      content: '你好，能帮我解释一下人工智能吗？'
    },
    {
      id: 2,
      role: 'assistant',
      content: '当然可以！人工智能（AI）是计算机科学的一个分支，它试图理解智能的本质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。'
    }
  ]
}

const loadAllSessions = () => {
  // 加载所有会话逻辑
  allSessions.value = [
    { id: 1, title: '人工智能基础概念', createTime: '2023-05-15T10:30:00Z' },
    { id: 2, title: '机器学习算法', createTime: '2023-05-14T14:20:00Z' },
    { id: 3, title: '深度学习框架', createTime: '2023-05-13T09:15:00Z' },
    { id: 4, title: '自然语言处理', createTime: '2023-05-12T16:45:00Z' },
    { id: 5, title: '计算机视觉应用', createTime: '2023-05-11T11:30:00Z' }
  ]
}

const searchSessions = () => {
  // 搜索会话逻辑
  if (searchKeyword.value) {
    allSessions.value = allSessions.value.filter(session =>
      session.title.includes(searchKeyword.value)
    )
  } else {
    loadAllSessions()
  }
}

const loadModels = () => {
  // 加载可用模型
  availableModels.value = [
    { modelName: 'GPT-4', description: '最强大的模型，适合复杂任务' },
    { modelName: 'GPT-3.5', description: '平衡性能和速度' },
    { modelName: 'Claude', description: '擅长分析和长文本处理' }
  ]
}

const loadPrompts = () => {
  // 加载可用提示词
  availablePrompts.value = [
    { id: 1, subject: '学术写作', content: '以学术风格回答问题' },
    { id: 2, subject: '代码解释', content: '以程序员的角度解释问题' },
    { id: 3, subject: '教学助手', content: '以教师的角度解释问题' }
  ]
}

const selectModel = (model: ModelView) => {
  selectedModel.value = model
}

const selectPrompt = (prompt: PromptSelf) => {
  selectedPrompt.value = prompt
}

const confirmModelSelection = () => {
  showModelSelector.value = false
  message.success(`已选择模型: ${selectedModel.value?.modelName}`)
}

const confirmPromptSelection = () => {
  showPromptSelector.value = false
  message.success(`已选择提示词: ${selectedPrompt.value?.subject}`)
}

const renderMarkdown = (content: string) => {
  return md.render(content || '')
}

const formatTime = (timeString: string) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN')
}

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 快捷键处理
const handleKeyDown = (e: KeyboardEvent) => {
  // Ctrl+K 快捷键创建新会话
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault()
    createNewSession()
  }
}

// 生命周期钩子
onMounted(() => {
  // 初始化数据
  loadModels()
  loadPrompts()
  
  // 加载最近会话
  loadAllSessions()
  // 取前5个作为最近会话
  recentSessions.value = allSessions.value.slice(0, 5)
  
  // 注册快捷键
  window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  // 清理EventSource
  if (eventSource) {
    eventSource.close()
  }
  
  // 移除快捷键监听
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
}

.sidebar-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.new-session-btn {
  margin-bottom: 16px;
}

.mode-selector {
  margin-bottom: 24px;
}

.history-section h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
}

.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
}

.session-item:hover,
.session-item.active {
  background-color: #e6f7ff;
}

.session-info {
  flex: 1;
}

.session-title {
  display: block;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-time {
  font-size: 12px;
  color: #999;
}

.view-all-btn {
  margin-top: 8px;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e8e8e8;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.initial-state {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.welcome-section {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

.welcome-section h1 {
  font-size: 48px;
  margin-bottom: 32px;
  color: #1890ff;
}

.input-container {
  margin-bottom: 32px;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.action-btn {
  font-size: 12px;
}

.action-btn.active {
  color: #1890ff;
  font-weight: bold;
}

.send-btn {
  margin-left: auto;
}

.quick-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.question-row a-button {
  flex: 1;
  max-width: 200px;
}

.chat-state {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
}

.message {
  display: flex;
  margin-bottom: 24px;
}

.message.user {
  justify-content: flex-end;
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 12px;
}

.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 8px;
  position: relative;
}

.message.user .message-content {
  background: #1890ff;
  color: white;
}

.message.assistant .message-content {
  background: #f0f0f0;
  color: #333;
}

.message-text {
  line-height: 1.5;
}

.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.deep-thinking-section {
  margin: 20px 0;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}

.document-state {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.document-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.upload-section {
  margin-top: 32px;
}

.link-input {
  margin-top: 24px;
  text-align: left;
}

.history-state {
  padding: 20px;
}

.history-header {
  margin-bottom: 20px;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.history-item {
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.history-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.history-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.history-info p {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.search-results {
  height: 100%;
  overflow-y: auto;
}

.search-result-item {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.search-result-item h4 {
  margin: 0 0 8px 0;
  color: #1890ff;
}

.search-result-item p {
  margin: 0 0 8px 0;
  color: #333;
}

.search-result-item a {
  font-size: 12px;
  color: #999;
}

.summary-content {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
}

:deep(.ant-list-item.selected) {
  background-color: #e6f7ff;
}
</style>